let morenIndex = 0;
axios.get('http://localhost:3000/toplist')
    .then(async function (res) {
        buildList_list(res);
        li_Button('0');
    })
    .catch(function (error) {
        console.log(error);
    });

function buildList_list(res) {
    // 官方榜单
    let official_list = document.querySelector('.official-list');
    // 全球榜单
    let globe_list = document.querySelector('.globe-list');
    let innner1 = '';
    let innner2 = '';
    for (let i = 0; i < 4; i++) {
        innner1 = innner1 + '<li onclick="li_Button(\'' + i + '\')" data-trackCount="' + res.data['list'][i]['trackCount'] + '" data-ranking-list-id="' + res.data['list'][i]['id'] + '" class="nav-item nav-item-list my-1 d-flex flex-row rounded">\n' +
            '                                            <img class="my-2"\n' +
            '                                                 src="' + res.data['list'][i]['coverImgUrl'] + '"\n' +
            '                                                 alt="">\n' +
            '                                            <div class="text-start list-name-updateFrequency">\n' +
            '                                                <p class="list-name mt-3 mb-2">' + res.data['list'][i]['name'] + '</p>\n' +
            '                                                <p class="list-updateFrequency my-1">' + res.data['list'][i]['updateFrequency'] + '</p>\n' +
            '                                            </div>\n' +
            '                                        </li>';

    }
    official_list.innerHTML = innner1;
    innner1 = null;
    for (let i = 4; i < res.data['list'].length; i++) {
        innner2 = innner2 + '<li onclick="li_Button(\'' + i + '\')" data-trackCount="' + res.data['list'][i]['trackCount'] + '" data-ranking-list-id="' + res.data['list'][i]['id'] + '" class="nav-item nav-item-list my-1 d-flex flex-row rounded">\n' +
            '                                            <img class="my-2"\n' +
            '                                                 src="' + res.data['list'][i]['coverImgUrl'] + '"\n' +
            '                                                 alt="">\n' +
            '                                            <div class="text-start list-name-updateFrequency">\n' +
            '                                                <p class="list-name mt-3 mb-2">' + res.data['list'][i]['name'] + '</p>\n' +
            '                                                <p class="list-updateFrequency my-1">' + res.data['list'][i]['updateFrequency'] + '</p>\n' +
            '                                            </div>\n' +
            '                                        </li>';
    }
    globe_list.innerHTML = innner2;
    innner2 = null;
}

function axiosListInfo_allSongs(ranking_list_id, trackCount) {
    axios.all([getListInfo(ranking_list_id), getAllSongs(ranking_list_id, trackCount)])
        .then(axios.spread(function (res1, res2) {
            buildList_info(res1);
            buildAllSongsTables(res2);
            post_Message();
        })).catch(error => {
        console.log(error);
    });
}

function getListInfo(ranking_list_id) {
    return axios.get(`http://localhost:3000/playlist/detail?id=${ranking_list_id}`);
}

function getAllSongs(ranking_list_id, trackCount) {
    return axios.get(`http://localhost:3000/playlist/track/all?id=${ranking_list_id}&limit=${trackCount}&offset=0`);
}

function buildList_info(res) {
    let coverImg = document.querySelector('.list-info-coverImg');
    let name = document.querySelector('.list-info-name');
    let cat = document.querySelector('.list-info-cat');
    let playCount = document.querySelector('.list-info-playCount');
    let subscribedCount = document.querySelector('.list-info-subscribedCount');
    let commentCount = document.querySelector('.list-info-commentCount');
    let description = document.querySelector('.list-info-description');
    let trackCount = document.querySelector('.table-list-trackCount');
    let playAllButton = document.querySelector('.play-table-all');
    coverImg.src = res.data['playlist']['coverImgUrl'];
    name.innerHTML = res.data['playlist']['name'] + '<span class="list-info-updateTime ms-2">(' + formatDate(res.data['playlist']['updateTime']) + ' 更新)</span>';
    cat.innerText = getStringsTags(res.data['playlist']['tags']);
    playCount.innerHTML = '<i class="bi bi-headphones"></i>&nbsp;' + changePlayCount(res.data['playlist']['playCount']) + '次'
    subscribedCount.innerHTML = '<i class="bi bi-heart"></i>&nbsp;' + changePlayCount(res.data['playlist']['subscribedCount']);
    commentCount.innerHTML = '<i class="bi bi-chat-dots"></i>&nbsp;' + changePlayCount(res.data['playlist']['commentCount']);
    description.innerText = res.data['playlist']['description'];
    trackCount.innerText = res.data['playlist']['trackCount'] + '首歌';
    playAllButton.setAttribute('onclick', `userParentFun('playlist',${res.data['playlist']['id']})`);
}

function buildAllSongsTables(res) {
    let songs_table_tbody = document.querySelector('.songs-table-tbody');
    songs_table_tbody.innerHTML = '';
    let inner = '';
    for (let i = 0; i < res.data['songs'].length; i++) {
        inner = inner + '<tr class="songs">\n' +
            '                                        <td class="text-start">\n' +
            '                                            <div class="song-list-index">' + (i + 1) + '</div>\n' +
            '                                            <div class="song-play-button">\n' +
            '                                                <i class="bi bi-play-circle"></i>\n' +
            '                                            </div>\n' +
            '                                        </td>\n' +
            '                                        <td class="song-name">' + limitLength(res.data['songs'][i]['name']) + '</td>\n' +
            '                                        <td><span class="song-authors">' + getArString(res.data['songs'][i]['ar']) + '</td>\n' +
            '                                        <td class="song-album">' + limitLength(res.data['songs'][i]['al']['name']) + '</td>\n' +
            '                                        <td class="text-end ">\n' +
            '                                            <div class="song-time">' + changeDt(res.data['songs'][i]['dt']) + '</div>\n' +
            '                                            <div class="song-icon-button">\n' +
            '                                                <i class="bi bi-plus-lg"></i>\n' +
            '                                                <i class="bi bi-folder-plus mx-1"></i>\n' +
            '                                            </div>\n' +
            '                                        </td>\n' +
            '                                    </tr>'
    }
    songs_table_tbody.innerHTML = inner;
    inner = null;
}

function formatDate(time) {
    const date = new Date(time);
    const month = date.getMonth() + 1,//月份是从0开始的
        day = date.getDate();
    return (month < 10 ? '0' + month : month) + '月' +
        (day < 10 ? '0' + day : day) + '日';
}

function changePlayCount(count) {
    if (parseInt(count) >= 10000) {
        let a = count / 10000;
        return (parseInt(a + "")) + "万";
    } else {
        return count;
    }
}

function getStringsTags(tas) {
    if (tas.length === 0) {
        return ' ';
    } else {
        for (let i = 0; i < tas.length; i++) {
            let a;
            a = '#' + tas[i];
            tas[i] = a;
        }
        return tas.join(' ');
    }
}

function getArString(ar) {
    let names = [];
    for (let i = 0; i < ar.length; i++) {
        if (i > 1) {
            break;
        }
        let a;
        a = '<span class="song-author">' + ar[i]['name'] + '</span>'
        names[i] = a;
    }
    if (ar.length <= 1) {
        return names.join('/');
    } else {
        return names.join('/') + '/...';
    }
}

function changeDt(dt) {
    if (parseInt(dt) >= 1000) {
        let a = parseInt((dt / 1000) + '');
        let b = parseInt((a / 60) + '');
        let c = a - 60 * b;
        return (b < 10 ? '0' + b : b) + ':' +
            (c < 10 ? '0' + c : c);
    } else {
        return '00:00';
    }
}

function limitLength(string) {
    return string.length > 8 ? string.substring(0, 8) + '..' : string;
}

function li_Button(index) {
    let nav_item_list = document.querySelectorAll('.nav-item-list');
    nav_item_list[morenIndex].classList.remove('active');
    nav_item_list[index].classList.add('active');
    let count = nav_item_list[index].getAttribute('data-trackCount');
    let id = nav_item_list[index].getAttribute('data-ranking-list-id');
    axiosListInfo_allSongs(id, count);
    morenIndex = index;
}
